<template>
  <div class="dialog-box">
    <div v-for="dialog in dialogList" :key="dialog.id">
      <BaseDialog
        :modelValue="true"
        @close="closeDialog(dialog)"
        v-bind="dialog.config">
        <component
          v-if="dialog.name"
          :is="components[dialog.name]"
          v-bind="dialog.props || {}"
          v-on="dialog.events || {}"
          @close="closeDialog(dialog)"
        ></component>
      </BaseDialog>
    </div>
  </div>
</template>

<script setup>
import BaseDialog from '@/components/BaseDialog/index.vue'
import DialogList from '@/components/BaseDialog/index'

import useDialogStore from '@/store/modules/dialog'
import { storeToRefs } from 'pinia'
const store = useDialogStore()
const { dialogList, dialogComponents } = storeToRefs(store)

// 已安装的组件
const components = ref([])
watch(dialogComponents.value, () => {
  dialogComponents.value.map(item => {
    if (!components.value[item]) {
      installComponent(item)
    }
  })
})
// 安装组件
async function installComponent(name) {
  const component = await DialogList[name]()
  components.value[name] = markRaw(component.default)
  console.log(components.value)
}
// 关闭组件
const closeDialog = (dialog) => {
  store.closeDialog(dialog.id, 'id')
}
</script>

<style>

</style>